<template>
<div>
  <div class="clips_hot_index">

  	 <div class="clips_hot_banner">
  	   <!--<img src="../../../static/images/1/banner.jpg"/>-->
  	      <el-carousel :interval="5000" arrow="always" >
				    <el-carousel-item  v-for="item in products" :key="item">
				      <!--<h3>{{ item }}</h3>-->
				      <img :src="item.url"/>
				    </el-carousel-item>
			   </el-carousel>
  	 </div>
     
        <div class="clips_hot_movie clearFix">
          <ul>

            <router-link tag='li' v-for="product in products"
            :to="{path:'/clips/clips_comment'}" key='index'>
               <img :src="[product.src]">
               <h1>{{product.title}}</h1>
               <p>{{product.content}}</p>
             </router-link>
             
          </ul>
      </div>
  </div>
  
 </div>
</template>

<script>
	
export default {
  
    name:'clips',
    
    data(){
        return{
          products:[
            {
                title:"蛋糕美食",
                content:'女版来自星星的你',
                src:'../../../static/images/1/magic_index.jpg',
                url:'../../../static/images/1/banner.jpg'
            },
            {
                title:"完美出逃",
                content:'高圣远载周迅帅气飙车',
                src:'../../../static/images/1/perfect_index.jpg',
                 url:'../../../static/images/1/banner.jpg'
            },
            {
                title:"活色生香",
                content:'陈伟霆移情别恋',
                src:'../../../static/images/1/life_index.jpg',
                 url:'../../../static/images/1/banner.jpg'
            },
            {
                title:"愿妄",
                content:'愿望逆转，爱情重生',
                src:'../../../static/images/1/want_index.jpg',
                 url:'../../../static/images/1/banner.jpg'
            },
            {
                title:"蛋糕美食",
                content:'女版来自星星的你',
                src:'../../../static/images/1/magic_index.jpg',
                 url:'../../../static/images/1/banner.jpg'
            },
            {
                title:"蛋糕美食",
                content:'女版来自星星的你',
                src:'../../../static/images/1/magic_index.jpg',
                 url:'../../../static/images/1/banner.jpg'
            }
          ]
        }

  },
  


    

}
</script>
<style lang="less" scoped>

	.banner{
		
		height: 300/64rem;
		
		width:(640-260)/64rem;
		
		left: 260/64rem;
		
	}
	.el-carousel{
	
		height: 300/64rem;
		
	}
	.el-carousel__indicator{
		
		display: none;
		
	}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 18/64rem;
    opacity: 0.75;
    line-height: 300/64rem;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.ofans_headers{
	
	height:80/64rem;

	margin:0 auto;

	background-Color:rgb(165,75,232);

	position:relative;

}
.ofans_headers_left img{
	
	height:30/64rem;

	width:40/64rem;

	margin-left:30/64rem;

	margin-top:25/64rem;

}

.ofans_headers>p{

	height:80/64rem;

    font-size:36/64rem;
    
    line-height:80/64rem;
   
    color:#fff;

    font-famliy:'Arial';

    width:((640-30*2-40-35)/640)*100%;

    text-align:center;

}
.ofans_headers_right img{
	
	height:35/64rem;

	width:35/64rem;

}
.ofans_headers_right{
	
	position:absolute;

	right:30/64rem;

	bottom:22.5/64rem;

}
.ofans_headers_left,.ofans_headers>p,.ofans_headers_right{
	
float:left;


}
.clearFix::after{
	
	content:'';

	clear:both;

	display:block;

}

.clips_hot_index .clips_hot_banner{

  height:300/64rem;

  width:100%;

  img{

    margin:0;

    width:100%;

    height:300/64rem;

  }
  
}
.clips_hot_index .clips_hot_movie{
	
	.clips_active{
		
		position:absolute;
		
		width:(300*2+20)/64rem;
		
		min-height: 700/64rem;
		
	  left: 260/64rem;
	
		
	}
  
  ul{

    list-style:none;

    margin-top:-80/64rem;

    li{

      float:left;

      height:180/64rem;

      width:290/64rem;

      padding:0 0  0 18/64rem;

      margin-top:100/64rem;

      font-family:'微软雅黑';
      
      font-size: 25/64rem;
      &:nth-child(even){

          margin-left: 20/64rem;
        }

      img{

        height:180/64rem;

        width:290/64rem;




         }
         h1{

          padding:5/64rem 0 8/64rem 0;


          color:#313131;

         }
         p{

          color:#959595;

          margin-top: -15/64rem; 

     }
      }


  }
    

}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
body {
  background: #f0f2f5;
  font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  font-size: 25/64rem;
  color: #444;
}



</style>



